// import worldMap from "./world.json" assert { type: "json" };
// import worldMap from "./world-cn-left.json" assert { type: "json" };
import worldMap from "./world-cn-right.json" assert { type: "json" };
import { geoCoordMap, countryNameZH } from "./data-world.js";

echarts.registerMap("world", worldMap);
const myChart = echarts.init(document.getElementById("worldMap"));

/**
 * 平移经度，适配亚洲为中心的地图
 */
const translationLng = ([lng, lat]) => {
    // if (lng > -30) {
    //     lng = lng - 180;
    // } else {
    //     lng = lng + 180;
    // }
    return [lng, lat];
};

// 重庆经纬度
const chongqing = [106.557165, 29.570997];
const points = [
    [{ name: "美国" }],
    [{ name: "日本" }],
    [{ name: "加拿大" }],
    [{ name: "俄罗斯" }],
    [{ name: "南非" }],
    [{ name: "韩国" }],
    [{ name: "阿根廷" }],
    [{ name: "巴西" }],
    [{ name: "德国" }],
    [{ name: "印度" }],
    [{ name: "澳大利亚" }],
    [{ name: "香港" }],
];
// 获取地图中起点和终点的坐标，以数组形式保存下来
const convertData = function (data) {
    return data.map((item) => {
        const fromCoord = geoCoordMap[item[0].name];
        const toCoord = chongqing;

        return [
            {
                coord: translationLng(fromCoord), // 起点坐标
            },
            {
                coord: translationLng(toCoord), // 终点坐标
            },
        ];
    });
};
const lineData = convertData(points);
const option = {
    backgroundColor: "#ffffff",

    legend: {
        show: false,
    },
    geo: {
        map: "world", // 引用的地图名字
        zoom: 1,
        nameMap: countryNameZH,
        layoutCenter: ['50%', '50%'],
        // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
        layoutSize: 1200,
        roam: false, // 禁止缩放平移
        // regions: [
        //     {
        //         // 选中的区域
        //         name: "中国",
        //         selected: false,
        //         itemStyle: {
        //             areaColor: "#E6E8EB",
        //             // 高亮时候的样式
        //             emphasis: {
        //                 areaColor: "#208dfa",
        //             },
        //         },
        //         label: {
        //             emphasis: {
        //                 show: true,
        //             },
        //         },
        //     },
        // ],
        itemStyle: {
            areaColor: "#E6E8EB",
            borderColor: "#bbbbbb",
            emphasis: {
                areaColor: "#208dfa",
            },
        },
        emphasis: {
            areaColor: "#E6E8EB",
            label: {
                color: "#ffffff",
                fontSize: 20,
            },
        },
    },
    series: [
        // 中国重庆点位
        {
            type: "scatter",
            coordinateSystem: "geo",
            symbol: `path://M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z`,  // require引入图片路径
            zlevel: 3,
            rippleEffect: {
                brushType: "stroke",
            },
            label: {
                show: true,
                position: "left",
                formatter: "{b}",
            },
            symbolSize: 20,
            itemStyle: {
                color: "#26c2a6",
            },
            data: [
                {
                    value: translationLng(chongqing),
                },
            ],
        },
        // {
        //     // 白色尾迹特效图
        //     type: "lines",
        //     zlevel: 1, // 用于分层，z-index的效果
        //     effect: {
        //         show: true, // 动效是否显示
        //         period: 4, // 特效动画时间
        //         trailLength: 0.7, // 特效尾迹的长度
        //         color: "#fff", // 特效颜色
        //         symbolSize: 3, // 特效大小
        //     },
        //     lineStyle: {
        //         // 正常情况下的线条样式
        //         color: "#337dfe",
        //         width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
        //         curveness: 0.2, // 线条曲度
        //     },
        //     data: lineData, // 特效的起始、终点位置
        // },
        {
            // 连线线效果
            type: "lines",
            zlevel: 2,
            symbolSize: 15,
            effect: {
                show: true,
                period: 4, // 特效动画时间
                trailLength: 0, // 特效尾迹的长度
                symbolSize: 2, // 特效大小
            },
            label: {
                show: false,
            },
            lineStyle: {
                normal: {
                    color: "#208dfa",
                    width: 1,
                    opacity: 0.8,
                    curveness: 0.4,
                    type: 'dotted'
                },
            },
            data: lineData, // 特效的起始、终点位置，一个二维数组
        },
        {
            // 散点效果
            // type: "effectScatter",
            type: "scatter",
            coordinateSystem: "geo", // 表示使用的坐标系为地理坐标系
            symbol: `path://M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z`,  // require引入图片路径
            zlevel: 3,
            rippleEffect: {
                brushType: "stroke", // 波纹绘制效果
            },
            label: {
                normal: {
                    // 默认的文本标签显示样式
                    show: true,
                    position: "left", // 标签显示的位置
                    fontSize: 20,
                    formatter: (v) => {
                        let nameList = Object.keys(geoCoordMap);
                        let index = nameList.findIndex(item => {
                            return geoCoordMap[item][0] === v.value[0] && geoCoordMap[item][1] === v.value[1]
                        })
                        return index > -1 ? nameList[index] : '';
                    }, // 标签内容格式器
                },
            },
            itemStyle: {
                normal: {
                    color: "#337dfe",
                },
            },
            data: points.map((item) => {
                return {
                    value: translationLng(geoCoordMap[item[0].name]),
                    symbolSize: 20,
                };
            }),
        },
        {
            // 终点
            // type: "effectScatter",
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 3,
            rippleEffect: {
                brushType: "stroke",
            },
            label: {
                show: true,
                position: "left",
                formatter: "{b}",
            },
            symbolSize: 15,
            itemStyle: {
                color: "#26c2a6",
            },
            data: [
                {
                    value: translationLng(chongqing),
                },
            ],
        },
    ],
    aria: {
        // 下面几行可以不写，因为 label.enabled 默认 true
        // label: {
        //     enabled: true
        // },
        enabled: true
    },
};
myChart.setOption(option);
